<template>
  <div class="trainer-container">
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <el-form ref="form" :model="formInline" label-width="100px">
        <el-row>
          <el-col :span="12" class="col-left">
            <span class="traing"></span>今日训练内容
            <span class="traing"></span>
          </el-col>
          <el-col :span="12" style="display:flex;justify-content:flex-end;">
            <el-form-item label=" " prop="boatType">
              <el-select
                @change="gatetime1"
                v-model="queryParams.training_status_7"
                placeholder="年度选择"
                clearable
                size="small"
                style="width: 160px"
              >
                <el-option
                  v-for="dict in statusIlls"
                  :key="dict.name"
                  :label="dict.name"
                  :value="dict.id"
                />
              </el-select>
              <el-button type="primary" class="newill" @click="harderClick">
                <i class="icon iconfont icon-zaocan"></i>
                <span>进入当日训练计划</span>
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-steps :active="active" class="admin-icon">
        <el-step
          v-for="(item,index) in stepList"
          :key="index"
          :title="item.secondLevel"
          :icon="item.icon"
        >
          <template slot="description">
            <div>{{item.s}} -{{item.y}}</div>
          </template>
        </el-step>
      </el-steps>
    </el-row>
    <div style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <el-row>
        <el-col :span="12" class="Completion">
          <span class="traing"></span>阶段目标完成情况(年度目标)
          <span class="traing"></span>
        </el-col>
        <el-col :span="12" class="Completion lastmouth">
          <span class="target-time"></span>
          <span>
            当前处于:{{activeData.cycleName}}/第
            <i>{{activeData.betownweek}}</i>个周期/大量积累周/
            <i>{{activeData.days}}</i>天
          </span>
        </el-col>
      </el-row>
      <div style="background:#fff;padding:16px;text-align:center">
        <div class="step">
          <div
            :class="item.selected?'step-item step-active':'step-item'"
            v-for="(item,inx) in tabsList"
            @click="tabs(item)"
            :key="inx"
          >
            <div class="texts">
              <div>{{item.cycleName}}</div>
              <span>{{item.week}}周</span>
            </div>

            <div v-show="item.selected" class="msg">
              <img :src="times" alt />
              <div>{{item.startTime}}~{{item.endTime}}</div>
            </div>
          </div>
        </div>
        <div class="weektatal">
          <div class="bor">
            <el-row>
              <el-col :span="6">
                <label class="label">累计基本周:</label>
                <span class="value">{{rows.count}} 周</span>
              </el-col>
              <el-col :span="6">
                <label class="label">累计积累周:</label>
                <span class="value">{{rows.count}}</span>
              </el-col>
              <el-col :span="6">
                <label class="label">累计调整周:</label>
                <span class="value">{{rows.count}}</span>
              </el-col>
              <el-col :span="6">
                <label class="label">累计大量基本周:</label>
                <span class="value">{{rows.count}}</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <label class="label">累计赛前强化周:</label>
                <span class="value">{{rows.count}}</span>
              </el-col>
              <el-col :span="6">
                <label class="label">累计比赛周:</label>
                <span class="value">{{rows.count}}</span>
              </el-col>
              <el-col :span="6">
                <label class="label">累计恢复周:</label>
                <span class="value">{{rows.count}}</span>
              </el-col>
              <el-col :span="6">
                <label class="label">累计过敏人数:</label>
                <span class="value">{{rows.count}}</span>
              </el-col>
            </el-row>
          </div>
          <div class="bor">
            <el-row>
              <el-col :span="6">
                <label class="label">累计请假人数:</label>
                <span class="value">{{rows.count}}</span>
                <router-link :to="{path:'/gen/attention',query:{type:3}}">
                  <i>
                    <img src="@/assets/image/zhuyi.png" />
                  </i>
                </router-link>
              </el-col>
              <el-col :span="6">
                <label class="label">累计受伤人数:</label>
                <span class="value">{{rows.count}}</span>
                <router-link :to="{path:'/',query:selectRow}">
                  <i>
                    <img src="@/assets/image/zhuyi.png" />
                  </i>
                </router-link>
              </el-col>
              <el-col :span="6">
                <label class="label">累计生病人数:</label>
                <span class="value">{{rows.count}}</span>
                <i>
                  <img src="@/assets/image/zhuyi.png" />
                </i>
              </el-col>
              <el-col :span="6">
                <label class="label">累计外训人数:</label>
                <span class="value">{{rows.count}}</span>
                <i>
                  <img src="@/assets/image/zhuyi.png" />
                </i>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <label class="label">累计过敏人数:</label>
                <span class="value">{{rows.count}}</span>
                <i>
                  <img src="@/assets/image/zhuyi.png" />
                </i>
              </el-col>
              <el-col :span="6">
                <label class="label">累计离队人数:</label>
                <span class="value">{{rows.count}}</span>
                <i>
                  <img src="@/assets/image/zhuyi.png" />
                </i>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </div>

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <el-col :span="12" class="col-left">
        <span class="traing"></span>年度训练地点/比赛地点
        <span class="traing"></span>
      </el-col>
      <el-col :span="12">
        <el-form ref="form" :model="formInline" label-width="100px" class="traing-place">
          <el-form-item label=" ">
            <el-select
              v-model="queryParams.training_status_6"
              placeholder="训练地点"
              @change="dataArea"
            >
              <el-option
                v-for="dict in statusOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="12">
        <!-- 地图 -->
        <div id="dataname" style="height:400px;width:100%;"></div>
      </el-col>
      <el-col :span="6">
        <el-table :data="manage" fit v-if="queryParams.training_status_6=='2'" border>
          <el-table-column prop="place" label="训练地点"></el-table-column>
          <el-table-column prop="weekCount" label="周期"></el-table-column>
          <el-table-column prop="locationCount" label="次数"></el-table-column>
        </el-table>
        <el-table :data="manage1" fit v-if="queryParams.training_status_6=='1'" border>
          <el-table-column prop="place" label="比赛地点"></el-table-column>
          <el-table-column prop="weekCount" label="周期"></el-table-column>
          <el-table-column prop="locationCount" label="次数"></el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <el-form ref="form" :model="formInline">
        <el-row>
          <el-col :span="12" class="col-left">
            <span class="traing"></span>2020年度各训练科目完成进度
            <span class="traing"></span>
          </el-col>
          <el-col :span="12" style="display:flex;justify-content:flex-end;">
            <el-form-item>
              <el-date-picker
                v-model="value1"
                @change="gatetime"
                type="daterange"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始月份"
                end-placeholder="结束月份"
              ></el-date-picker>
              <span class="server-table" @click="tabledata">
                <i style="font-size:30px" class="el-icon-s-data"></i>
              </span>
              <span class="server-table" @click="tableoperation">
                <i style="font-size:30px" class="el-icon-s-operation"></i>
              </span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div v-show="showGroup">
        <el-row>
          <el-col :span="24" class="nowtarget">
            <span>
              <img src="@/assets/image/right.png" />
            </span>阶段目标下专项训练划行公里数
            <span>
              <img src="@/assets/image/right.png" />
            </span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="nowtarget" id="pictrues"></el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div style="display:flex" class="col-span">
              <span>
                <img src="@/assets/image/right.png" />
              </span>各维度训练时间占
              <span>
                <img src="@/assets/image/right.png" />
              </span>
            </div>
            <!-- 饼图 -->
            <div id="pic1">
              <bin
                :data="completionTimes"
                :clonm="prietrue"
                id="bin2"
                v-if="completionTimes&&completionTimes.length>0"
              ></bin>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="col-span">
              <span>
                <img src="@/assets/image/right.png" />
              </span>水陆专项训练量占比
              <span>
                <img src="@/assets/image/right.png" />
              </span>
            </div>
            <div id="pic5">
              <bin :data="binList" id="bin1" :clonm="prietrue1" v-if="binList&&binList.length>0"></bin>
            </div>
          </el-col>
        </el-row>
        <el-col :span="24" class="totaltime">
          <div class="traing-time">
            <span>
              <img src="@/assets/image/right.png" />
            </span>各维度训练时长
            <span>
              <img src="@/assets/image/right.png" />
            </span>
          </div>
        </el-col>

        <el-col :span="12" class="col-exception">
          <span>水上专项训练</span>
          <el-progress
            :text-inside="true"
            :stroke-width="20"
            :percentage="progressNum1"
            status="exception"
          ></el-progress>
        </el-col>
        <el-col :span="12">
          <span style="font-size:14px;">陆上专项训练</span>
          <el-progress
            :text-inside="true"
            :stroke-width="20"
            :percentage="progressNum2"
            status="exception"
          ></el-progress>
        </el-col>
        <!-- 柱形图 -->
        <el-col :span="24" class="totaltime tatalnow">
          <div>
            <span>
              <img src="@/assets/image/right.png" />
            </span>当前阶段目标各维度训练完成情况
            <span>
              <img src="@/assets/image/right.png" />
            </span>
          </div>
        </el-col>
        <div id="pic9"></div>
      </div>
      <div v-show="showtable">
        <el-table :data="indexTable" style="width: 100%">
          <el-table-column prop="levelName" label="训练内容"></el-table-column>
          <el-table-column prop="completionTime" label="完成值"></el-table-column>
          <el-table-column prop="targetTime" label="目标值"></el-table-column>
          <el-table-column prop="times" label="差值">
            <template slot-scope="scope">
              <span>{{scope.row.targetTime-scope.row.completionTime}}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-row>
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <el-col :span="12">
        <span class="traing"></span>2020年度队伍专项训练最好成绩TOP10
        <span class="traing"></span>
      </el-col>
      <el-col :span="12" style="display:flex;justify-content:flex-end;">
        <el-form ref="form" :inline="true" :model="formInline" label-width="100px">
          <el-form-item>
            <el-select v-model="formInline.event" placeholder="项目选择" @change="handerChooseObject">
              <el-option label="水上专项训练" value="special_training_water"></el-option>
              <el-option label="陆上专项训练(测功仪)" value="land_specific_training_dynamometer"></el-option>
            </el-select>
            <el-select
              v-model="formInline.boatType"
              @change="trainingResults"
              v-if="formInline.event == 'special_training_water'"
              placeholder="艇支筛选"
            >
              <el-option
                v-for="dict in vesselsOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div class="center">
            <span>
              <img src="@/assets/image/nan.png" />
            </span>
          </div>
          <el-table :data="manTable" style="width: 100%">
            <el-table-column prop="train" label="名次">
              <template slot-scope="scope">
                <img v-if="scope.$index==0" src="@/assets/image/one.png" />
                <img v-if="scope.$index==1" src="@/assets/image/two.png" />
                <img v-if="scope.$index==2" src="@/assets/image/tree.png" />
                <span v-if="scope.$index>2">{{scope.$index}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="运动员"></el-table-column>
            <el-table-column prop="achievement" label="成绩"></el-table-column>
            <el-table-column prop="propellerFrequency" label="浆频"></el-table-column>
            <el-table-column prop="heartRate" label="心率"></el-table-column>
            <el-table-column prop="lacticAcid" label="乳酸"></el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="12" class="col-bottom">
        <el-card class="el-card">
          <div class="center">
            <span>
              <img src="@/assets/image/nv.png" />
            </span>
          </div>
          <el-table :data="manTable" style="width: 100%">
            <el-table-column prop="train" label="名次">
              <template slot-scope="scope">
                <img v-if="scope.$index==0" src="@/assets/image/one.png" />
                <img v-if="scope.$index==1" src="@/assets/image/two.png" />
                <img v-if="scope.$index==2" src="@/assets/image/tree.png" />
                <span v-if="scope.$index>2">{{scope.$index}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="运动员"></el-table-column>
            <el-table-column prop="achievement" label="成绩"></el-table-column>
            <el-table-column prop="propellerFrequency" label="浆频"></el-table-column>
            <el-table-column prop="heartRate" label="心率"></el-table-column>
            <el-table-column prop="lacticAcid" label="乳酸"></el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
// import axios from "axios";
import moment from "moment";
import "echarts/map/js/china.js";
import times from "@/assets/image/times.png";
import {
  selectime,
  traing,
  target,
  totalweek,
  Traininglocation,
  showtimes,
  getTrainingResults,
  getTrainingProgramList,
  WeekTypeStatistic,
  todaytraining,
} from "@/api/monitor/logininfor";
import bin from "@/components/echarts/bin";
export default {
  components: { bin },
  data() {
    return {
      items2: {},
      times: times,
      // 下拉框词典
      statusOptions: [],
      progressNum1: 0,
      progressNum2: 0,
      indexTable: [],
      mapOption: [],
      stepList: [],
      // 饼图
      prietrue: [],
      completionTimes: [],
      value1: [{}],
      categoriesx: [],
      arrvalue: [],
      pointArr: [], //这个是第一个的 用来放点的  也就是series中的data的
      pointArr2: [],
      milepostActive: 1,
      stepActive: "stepActive",
      key: 0,
      showGroup: true,
      showtable: false,
      formInline: {
        user: "",
        region: "",
        event: "", // 项目
        boatType: "", // 舰艇
      },
      queryParams: {
        training_status_6: "1",
        training_status_7: "",
      },
      statusIlls: [],
      tableData1: [],
      manage: [],
      manage1: [],

      vesselsOptions: [],
      manTable: [],
      binList: [],
      prietrue1: [],
      targetKms: [],
      targetTimes: [],
      tabsList: [],
      selectRow: "",
      activeData: "",
      rowss: "",
      rows1: "",
      active: -12,
      places: [],
      mapChart: null,
      testData: null,
    };
  },
  created() {
    this.trainingResults();
    // 数据词典
    this.GetListing("type_boat_support")
      .then((res) => {
        this.vesselsOptions = res.data;
      })
      .catch((res) => {});
    this.GetListing("adress_type")
      .then((res) => {
        this.statusOptions = res.data;
      })
      .catch((res) => {});
    // 今日训练内容//i 就是index   steps 的index 是从1开始  所以要加1
    todaytraining()
      .then((response) => {
        let iconArr = [
          "icon iconfont icon--pt",
          "icon iconfont icon-jirou",
          "icon iconfont icon-changyonggongneng-xunlianying",
          "icon iconfont icon-shui",
          "icon iconfont icon-zaixianduanlian",
          "icon iconfont icon-jirou",
        ];
        var time = new Date().getTime();
        response.data.map((e, i) => {
          e["s"] = moment(e.startTime).format("HH:mm:ss");
          e["y"] = moment(e.endTime).format("HH:mm:ss");
          var startTime = new Date(e.startTime).getTime();
          e.icon = iconArr[i];
          var endTime = new Date(e.endTime).getTime();
          if (startTime <= time && time < endTime) {
            this.active = i + 1;
          }
        });
        this.stepList = response.data;
      })
      .catch((res) => {});
    selectime()
      .then((response) => {
        this.statusIlls = response.data;
      })
      .catch((res) => {});
    // 掉接口饼图数据
    getTrainingProgramList()
      .then((response) => {
        if (response.code == 200) {
          this.indexTable = response.data;

          // 这里 页面的表格中的 prop 没有写上对应的字段
          this.binList = [];
          var list = [[], []];
          for (var i = 0; i < this.indexTable.length; i++) {
            var item = this.indexTable[i];
            this.binList.push({
              value: item.completionKm,
              name: item.levelName,
            });
            if (item.levelName != "无训练") {
              // 无训练
              list[0].push(item.completionKm);
              list[1].push(item.targetKm);
            }
            if (item.levelName == "水上专项训练") {
              if (item.targetTime != 0) {
                this.progressNum1 = item.completionTime / item.targetTime;
              } else {
                this.progressNum1 = 0;
              }
            } else if (item.levelName == "陆上专项训练") {
              if (item.targetTime != 0) {
                this.progressNum2 = item.completionTime / item.targetTime;
              } else {
                this.progressNum2 = 0;
              }
            }
            this.prietrue.push(item.levelName);

            this.completionTimes.push({
              name: item.levelName,
              value: item.completionTime,
            });

            this.targetKms.push(item.targetKm);
            this.targetTimes.push(item.targetTime);
          }
          var sum = 0;
          this.indexTable.map((e) => {
            sum = sum + e.completionTime;
          });
          var totaltimes = eval(this.targetTimes.join("+"));
          this.binList = this.binList.filter((e) => {
            return e.name != "无训练";
          });
          this.prietrue1 = this.prietrue.filter((e) => {
            return e != "无训练";
          });
          this.TrainTarget("pic9", this.prietrue1, list);
        }
      })
      .catch((res) => {});

    // 阶段目标完成情况(年度目标) 周形统计1
    target()
      .then((res) => {
        console.log(res);
        var time = new Date().getTime();
        this.tabsList = res.data.annualPlan.map((e) => {
          var start = new Date(e.startTime).getTime();
          var end = new Date(e.endTime).getTime();
          if (time >= start && time < end) {
            e.selected = true;
            this.activeData = e;
            this.tabs(e, 1);
          } else {
            e.selected = false;
          }
          return e;
        });
      })
      .catch((res) => {});
    showtimes()
      .then((res) => {
        var trainingWaterArr = [];
        var dynamometerArr = [];
        const hash = {};
        const hash1 = {};
        const newArr = res.data.special_training_water.reduceRight(
          (item, next) => {
            hash[next.month]
              ? ""
              : (hash[next.month] = true && item.push(next));
            return item;
          },
          []
        );
        const newArr1 = res.data.land_specific_training_dynamometer.reduceRight(
          (item, next) => {
            hash1[next.month]
              ? ""
              : (hash1[next.month] = true && item.push(next));
            return item;
          },
          []
        );
        var list0 = [];
        var list1 = [];
        for (var i = 0; i < newArr.length; i++) {
          list0.push(newArr[i].month, newArr[i].completionKm);
        }
        for (var i = 0; i < newArr1.length; i++) {
          list1.push(newArr1[i].month, newArr1[i].completionKm);
        }
        for (let j = 0; j < list0.length; j += 2) {
          trainingWaterArr.push(list0.slice(j, j + 2));
        }
        for (let j = 0; j < list1.length; j += 2) {
          dynamometerArr.push(list1.slice(j, j + 2));
        }
        this.drawChart("pictrues", {
          dynamometerArr: dynamometerArr,
          trainingWaterArr: trainingWaterArr,
        });
      })
      .catch((res) => {});
  },
  mounted() {
    this.mapChart = this.$echarts.init(document.getElementById("dataname"));
    this.dataArea(this.queryParams.training_status_6);
    this.drawChart("pictrues", {
      dynamometerArr: [],
      trainingWaterArr: [],
    });
    window.addEventListener("resize", this.reRenden);
  },
  methods: {
    tabs(item, type) {
      this.selectRow = item;
      this.tabsList = this.tabsList.map((e) => {
        e.selected = false;
        const totalMinute = moment(e.endTime).diff(e.startTime);
        const d = moment.duration(totalMinute);
        e["week"] = Math.floor(d.asWeeks());
        return e;
      });
      item.selected = true;
      var date = new Date();
      const totalMinute2 = moment(item.endTime).diff(date);
      const z = moment.duration(totalMinute2);
      if (type) {
        this.activeData["days"] = Math.ceil(z.asDays());
        this.activeData["betownweek"] = Math.ceil(z.asWeeks());
      } else {
        this.selectRow["days"] = Math.ceil(z.asDays());
        this.selectRow["betownweek"] = Math.ceil(z.asWeeks());
      }
      //阶段目标完成情况(年度目标) 周形统计2
      totalweek({
        weekPlanStartTime: item.startTime,
        weekPlanEndTime: item.endTime,
      })
        .then((res) => {
          console.log(res, 2);
          this.rowss = res.data[0];
          this.testData = res.data;
          // 阶段目标情况
        })
        .catch((res) => {});
      //  //阶段目标完成情况(年度目标) 周形统计3
      WeekTypeStatistic({
        weekPlanStartTime: item.startTime,
        weekPlanEndTime: item.endTime,
      })
        .then((res) => {
          console.log(res, 3);
          // 为啥只去第一条数据
          this.rows1 = res.data[0];
        })
        .catch((res) => {});
    },
    handerChooseObject() {
      let params = {};
      // 选择了陆上
      if (this.formInline.event == "land_specific_training_dynamometer") {
        this.trainingResults();
      }
    },
    trainingResults() {
      let params = {};
      // 选择了陆上
      if (this.formInline.event == "land_specific_training_dynamometer") {
        params.event = this.formInline.event;
      }
      // 选择水上
      if (this.formInline.event == "special_training_water") {
        params.boatType = this.formInline.boatType;
      }

      getTrainingResults(params)
        .then((response) => {
          if (response.code == 200) {
            this.manTable = response.data;
          }
        })
        .catch((res) => {});
    },
    chartMouseOver(chart1) {
      chart1.on("mouseover", function (params) {
        if (params.data.value != undefined) {
          chart1.dispatchAction({
            type: "downplay",
          });
        }
      });
    },
    reRenden() {
      var pictrues = this.$echarts.init(document.getElementById("pictrues"));
      pictrues.resize();
    },
    drawChart(type, data) {
      var chart1 = this.$echarts.init(document.getElementById(type));
      chart1.clear();
      var option = {
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          data: [...data.dynamometerArr].reverse().map(function (item) {
            return item[0];
          }),
        },
        yAxis: {
          splitLine: {
            show: false,
          },
          name: "(公里)",
        },
        legend: {
          data: ["水上专项", "陆上专项"],
        },
        color: ["#C23632", "#304654"],
        series: [
          {
            name: "水上专项",
            type: "line",
            smooth: true,
            symbol:
              [...data.trainingWaterArr].reverse().length == 0
                ? "circle"
                : "none",
            lineStyle: {
              normal: {
                color: "#C23632",
                width: 1,
              },
            },
            data: [...data.trainingWaterArr].reverse().map(function (item) {
              return item[1];
            }),
          },
          {
            name: "陆上专项",
            type: "line",
            smooth: true,
            symbol:
              [...data.dynamometerArr].reverse().length == 0
                ? "circle"
                : "none",
            lineStyle: {
              normal: {
                color: "#304654",
                width: 1,
              },
            },
            data: [...data.dynamometerArr].reverse().map(function (item) {
              return item[1];
            }),
          },
        ],
      };
      chart1.setOption(option);
      this.chartMouseOver(chart1);
    },
    gatetime() {},
    gatetime1() {},
    harderClick() {
      this.$router.push({
        path: "/gen/Weekday",
      });
    },
    tabledata() {
      this.showGroup = true;
      this.showtable = false;
    },

    // 比赛和训练地点下拉框的方法
    dataArea(value) {
      var _this = this;
      Traininglocation({
        type: value,
      })
        .then((res) => {
          console.log(res, 100000000);
          if (value == "1") {
            this.manage1 = res.data;
          } else if (value == "2") {
            this.manage = res.data;
          }

          let opts = {
            title: "标题动态改变",
            name: "动态改变",
            data: [],
          };
          res.data.map((item) => {
            opts.data.push({
              name: item.place,
              value: [item.lng, item.lat, item.weekCount],
              count: item.locationCount,
            });
          });

          _this.changeMapChart(opts);
        })
        .catch((res) => {});
    },
    trainingProgramList() {
      let params = {
        naturalYearId: this.queryParams.training_status_7,
      };
    },
    tableoperation() {
      this.showtable = true;
      this.showGroup = false;
    },
    // 饼图1
    initData(element) {
      var myChart = this.$echarts.init(document.getElementById(element));
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)",
        },
        // legend: {
        //   // orient: "vertical",
        //   // bottom: "bottom",
        //   data: this.prietrue,
        // },
        color: ["#75B6E4", "#90EC7D", "#46454A"],
        series: [
          {
            // name: "访问来源",
            type: "pie",
            radius: "70%",
            label: {
              normal: {
                position: "inner",
                show: false,
              },
            },
            center: ["40%", "40%"],
            data: this.completionTimes,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },
    TrainTarget(element, clonm, data) {
      var myChart = this.$echarts.init(document.getElementById(element));
      myChart.setOption({
        title: {
          text: "公里数",
          left: "50",
          textStyle: {
            fontSize: 14,
          },
        },
        color: ["#CADEF7", "#4A7CF5"],
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          data: clonm,
          splitLine: {
            show: false,
          },
        },
        yAxis: {
          splitLine: {
            show: false,
          },
        },
        legend: {
          orient: "vertical",
          bottom: "bottom",
          data: this.clonm,
        },
        series: [
          {
            name: "完成值",
            type: "bar",
            stack: "使用情况",
            data: data[0],
            barWidth: "30%",
          },
          {
            name: "目标值",
            type: "bar",
            stack: "使用情况",
            data: data[1],
            barWidth: "30%",
            textStyle: {
              normal: { color: "#000" },
            },
          },
        ],
      });
    },
    // 地图
    changeMapChart(opts) {
      var title = this.statusOptions.filter((e) => {
        return e.dictValue == this.queryParams.training_status_6;
      })[0].dictLabel;
      opts = Object.assign(
        {
          title: "",
          name: "",
          data: [],
        },
        opts
      );

      this.mapChart.clear();
      this.mapChart.setOption({
        title: {
          text: title,
          right: "60%",
        },
        tooltip: {
          trigger: "item",
          formatter: function (value, a, b) {
            return (
              value.data.name + value.value[2] + "周" + value.data.count + "次"
            );
          },
        },
        itemStyle: {
          normal: {
            areaColor: "#f00",
          },
          emphasis: {
            areaColor: "#f00",
          },
        },
        geo: {
          map: "china",
          left: "10",
          right: "35%",
          center: [100.98561551896913, 36.205000490896193],
          zoom: 1, //地图初始缩放比例
          label: {
            emphasis: {
              show: false,
            },
          },
          roam: false, //是否可以地图移动缩放
          itemStyle: {},
        },
        series: [
          {
            name: opts.name,
            type: "scatter",
            coordinateSystem: "geo",
            data: opts.data,
          },
        ],
      });
    },
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.reRenden);
  },
  computed: {
    rows() {
      return this.rowss;
    },
    testDate1(){
    
      return this.testData;
    }
  },
  // watch: {
  //     rowss(newval,oldvalue) {
  //       this.row = val;
  //     }
  // }
};
</script>

<style scoped lang="scss">
.center {
  text-align: center;
}
.col-bottom {
  margin-bottom: 20px;
}
.el-card {
  margin-left: 20px;
}
.tatalnow {
  margin: 50px auto;
}
.TrainerNow {
  padding: 26px 8px;
  font-size: 16px;
  margin-left: 6px;
  font-weight: bold;
}
.newill {
  margin-left: 15px;
}
.el-steps--horizontal {
  padding-left: 30px;
}
.el-steps--horizontal[data-v-bc2c2dea] {
  padding-top: 71px;
  margin-bottom: 95px;
}
.trainer-container {
  padding: 32px;
  background-color: #f0f2f5;
  position: relative;
}
.server-table {
  margin-left: 20px;
}
.server-table:hover {
  cursor: pointer;
  color: #409eff;
}
.server-table {
  width: 25%;
  height: 200px;
}
/* 饼状图 */
#pic1,
#pic5 {
  flex: 1;
  height: 400px;
  margin: 20px auto;
}
#pic9 {
  width: 1150px;
  height: 502px;
  margin: 40px auto;
  overflow: hidden;
}
.target {
  border-right: 1px solid gray;
  padding-right: 10px;
  padding-left: 10px;
  margin-right: 20px;
}
.bor {
  border-top: 1px dashed #dddfe6;
  margin-top: 20px;
  padding: 20px 0;
}
.bor .label {
  display: inline-block;
  vertical-align: middle;
  width: 105px;
  text-align: left;
  color: #777777;
}
.bor .value {
  display: inline-block;
  vertical-align: middle;
  width: 46px;
  text-align: left;
  color: #222;
}

.el-card__body {
  text-align: center;
}
.train-font {
  font-weight: 500;
}
.train-target {
  margin-top: 15px;
  margin-bottom: 15px;
  color: #8abcfc;
}
ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}
.totaltime {
  text-align: center;
  margin-bottom: 30px;
  font-size: 14px;
}
.el-progress {
  width: 334px;
  display: inline-block;
}
.col-exception {
  text-align: center;
  margin-bottom: 20px;
  font-size: 14px;
}
.col-left {
  text-align: left;
  font-size: 14px;
}
.weektatal {
  color: #777777;
  font-size: 14px;
  overflow: hidden;
}
.weektatal .el-col-6 {
  margin-top: 20px;
}
.step {
  overflow: hidden;
  padding-bottom: 68px;
}
.step-item {
  height: 56px;
  line-height: 27px;
  background: #f4f5f9;
  float: left;
  width: 16%;
  min-width: 120px;
  font-size: 13px;
  color: #666666;
  position: relative;
}
.msg {
  color: #ff1d2b;
  font-size: 13px;
  line-height: 18px;
  position: absolute;
  top: 65px;
  left: 50%;
  width: 200px;
  margin-left: -100px;
  z-index: 1000;
  font-weight: 900;
  text-align: center;
}
.msg img {
  width: 16px;
  height: 16px;
  margin-block: 30px;
}
.step .step-item:last-child {
  position: relative;
}
.step-active .texts {
  background: #ff1d2b;
  color: #fff;
}
.step .texts {
  height: 100%;
  position: relative;
  z-index: 100;
}
.step .step-item:last-child::after {
  position: absolute;
  content: "";
  width: 40px;
  height: 40px;
  background: #f4f5f9;
  right: -20px;
  top: 8px;
  z-index: 1;
  transform: rotate(45deg);
}
.traing-place {
  margin-left: 109px;
}
.traing-time {
  font-size: 14px;
}
.el-table .cell {
  text-align: center;
}
</style>
<style>
.col-span {
  padding-left: 251px;
  font-size: 14px;
}
.app-main {
  margin-top: 20px;
}

.traing {
  display: inline-block;
  width: 14px;
  height: 8px;
  background-color: #2583ff;
  margin-right: 7px;
  margin-left: 7px;
}
.admin-icon .el-step__icon-inner {
  font-size: 31px;
}
.target-time {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: red;
}
.Completion {
  margin-bottom: 20px;
  font-size: 14px;
}
.lastmouth {
  text-align: right;
  padding-right: 30px;
}
.el-select-dropdown__item {
  text-align: center;
}
.nowtarget {
  text-align: center;
  margin-top: 50px;
  font-size: 14px;
}
#pictrues {
  height: 300px;
}
.el-table .cell {
  text-align: center;
}
</style>


